<script setup name="inform_list">
import OAMain from "@/components/OAMain.vue";
import OADialog from "@/components/OADialog.vue";
import OAPagination from "@/components/OAPagination.vue";
import datetimeFormat from "@/utils/datetimeFormat.js";
import {onMounted, reactive, ref} from "vue";
import {useAuthStore} from "@/stores/auth.js";
import informhttp from "@/api/informhttp.js";
import {ElMessage} from "element-plus";

let informs = ref([])
const authStore = useAuthStore()

let pagination = reactive({
  page: 1,
  total: 0
})
onMounted(async () => {
  try {
    let data = await informhttp.getInformList(1)
    data = data.data
    pagination.total = data.count
    informs.value = data.results
  } catch (error) {
    ElMessage.error(error.message)
  }
})
let handleIndex = 0
let dialogVisible = ref(false)
const onShowDialog = (index) => {
  handleIndex = index
  dialogVisible.value = true
}

const ondeleteInform = async (id) => {
  dialogVisible.value = false
  try {
    const result = await informhttp.deleteInform(handleIndex);
    informs.value.splice(informs.value.length, 1)
    ElMessage.success("删除成功！")
  } catch (error) {
    ElMessage.error("删除失败！" + error)
  }
}
</script>

<template>
  <OADialog title="提示" @submit="ondeleteInform" v-model="dialogVisible">
    <span>您确认删除这条信息吗？</span>
  </OADialog>
  <OAMain title="通知列表">
    <el-card>
      <el-table :data="informs" style="width: 100%">
        <el-table-column label="详情">
          <template #default="scope">
            <RouterLink :to="{ name: 'inform_detail', params: { pk: scope.row.id } }">
              <el-badge v-if="scope.row.reads.length === 0" is-dot class="item">
                {{ scope.row.title }}
              </el-badge>
              <el-badge v-else>
                {{ scope.row.title }}
              </el-badge>
<!--              <template v-if="scope.row.reads.length === 0">未读</template>-->
<!--              <template v-else>已读</template>-->
            </RouterLink>
          </template>
        </el-table-column>
        <el-table-column label="发布者">
          <template #default="scope">
            {{ '[' + scope.row.author.department.name + ']' + scope.row.author.realname }}

          </template>
        </el-table-column>
        <el-table-column label="发布时间">
          <template #default="scope">
            {{ datetimeFormat.stringFromDateTime(scope.row.create_time) }}
          </template>
        </el-table-column>
        <el-table-column label="发布时间">
          <template #default="scope">
            {{ datetimeFormat.stringFromDateTime(scope.row.create_time) }}
          </template>
        </el-table-column>
        <el-table-column label="部门可见">
          <template #default="scope">
            <el-tag v-if="scope.row.public" type="success">公开</el-tag>
            <el-tag v-else v-for="department in scope.row.departments" :key="department.name" type="info">{{
                department.name
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button v-if="scope.row.author.uid == authStore.user.uid" @click="onShowDialog(scope.$index)"
                       type="danger" icon="Delete"/>
            <el-button v-else disabled type="default">无</el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <OAPagination v-model="pagination.page" :total="pagination.total" >

        </OAPagination>
      </template>
    </el-card>
  </OAMain>


</template>

<style scoped>
.el-tag {
  margin-right: 4px;
  margin-top: 4px;
}
.el-badge{
  margin-right: 4px;
  margin-top: 4px;
}
</style>